<template>
  <div class="message-example">
    <h3>消息弹框使用示例</h3>
    
    <!-- 方式1: 使用全局方法 $baseMessage -->
    <div class="example-section">
      <h4>方式1: 全局方法 ($baseMessage)</h4>
      <div class="button-group">
        <v-btn @click="testGlobalMessage('success')" color="success" class="ma-1">
          成功消息
        </v-btn>
        <v-btn @click="testGlobalMessage('error')" color="error" class="ma-1">
          错误消息
        </v-btn>
        <v-btn @click="testGlobalMessage('warning')" color="warning" class="ma-1">
          警告消息
        </v-btn>
        <v-btn @click="testGlobalMessage('info')" color="info" class="ma-1">
          信息消息
        </v-btn>
      </div>
    </div>

    <!-- 方式2: 使用全局快捷方法 $message -->
    <div class="example-section">
      <h4>方式2: 全局快捷方法 ($message)</h4>
      <div class="button-group">
        <v-btn @click="testQuickMessage('success')" color="success" class="ma-1">
          $message.success
        </v-btn>
        <v-btn @click="testQuickMessage('error')" color="error" class="ma-1">
          $message.error
        </v-btn>
        <v-btn @click="testQuickMessage('warning')" color="warning" class="ma-1">
          $message.warning
        </v-btn>
        <v-btn @click="testQuickMessage('info')" color="info" class="ma-1">
          $message.info
        </v-btn>
      </div>
    </div>

    <!-- 方式3: 使用 Composition API Hook -->
    <div class="example-section">
      <h4>方式3: Composition API Hook (useMessage)</h4>
      <div class="button-group">
        <v-btn @click="testHookMessage('success')" color="success" class="ma-1">
          Hook Success
        </v-btn>
        <v-btn @click="testHookMessage('error')" color="error" class="ma-1">
          Hook Error
        </v-btn>
        <v-btn @click="testHookMessage('warning')" color="warning" class="ma-1">
          Hook Warning
        </v-btn>
        <v-btn @click="testHookMessage('info')" color="info" class="ma-1">
          Hook Info
        </v-btn>
      </div>
    </div>

    <!-- 特殊示例 -->
    <div class="example-section">
      <h4>特殊示例</h4>
      <div class="button-group">
        <v-btn @click="testLongMessage" color="primary" class="ma-1">
          长文本消息
        </v-btn>
        <v-btn @click="testCustomTimeout" color="secondary" class="ma-1">
          自定义超时时间
        </v-btn>
        <v-btn @click="testMultipleMessages" color="purple" class="ma-1">
          多条消息队列
        </v-btn>
        <v-btn @click="testOriginalExample" color="orange" class="ma-1">
          原始示例
        </v-btn>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance } from 'vue';
import { useMessage } from '@/composables/useMessage';

// 获取当前实例以使用全局方法
const instance = getCurrentInstance();

// 使用 Composition API Hook
const { success, error, warning, info, base } = useMessage();

/**
 * 测试全局 $baseMessage 方法
 */
const testGlobalMessage = (type: 'success' | 'error' | 'warning' | 'info') => {
  const messages = {
    success: '操作成功！',
    error: '组织树深度最大支持4层',
    warning: '请注意数据安全！',
    info: '这是一条信息提示'
  };
  
  if (instance) {
    instance.proxy?.$baseMessage(messages[type], type);
  }
};

/**
 * 测试全局快捷方法
 */
const testQuickMessage = (type: 'success' | 'error' | 'warning' | 'info') => {
  const messages = {
    success: '快捷方法：操作成功！',
    error: '快捷方法：操作失败！',
    warning: '快捷方法：警告信息！',
    info: '快捷方法：提示信息！'
  };
  
  if (instance) {
    instance.proxy?.$message[type](messages[type]);
  }
};

/**
 * 测试 Hook 方法
 */
const testHookMessage = (type: 'success' | 'error' | 'warning' | 'info') => {
  const messages = {
    success: 'Hook方法：操作成功！',
    error: 'Hook方法：操作失败！',
    warning: 'Hook方法：警告信息！',
    info: 'Hook方法：提示信息！'
  };
  
  const methods = { success, error, warning, info };
  methods[type](messages[type]);
};

/**
 * 测试长文本消息
 */
const testLongMessage = () => {
  base('这是一条很长的消息文本，用来测试消息组件对长文本的处理能力。当消息内容很长时，组件应该能够正确显示并保持良好的用户体验。', 'info', {
    multiLine: true,
    timeout: 6000
  });
};

/**
 * 测试自定义超时时间
 */
const testCustomTimeout = () => {
  success('这条消息将在8秒后自动关闭', {
    timeout: 8000
  });
};

/**
 * 测试多条消息队列
 */
const testMultipleMessages = () => {
  success('第一条消息');
  setTimeout(() => error('第二条消息'), 100);
  setTimeout(() => warning('第三条消息'), 200);
  setTimeout(() => info('第四条消息'), 300);
};

/**
 * 测试原始示例
 */
const testOriginalExample = () => {
  if (instance) {
    instance.proxy?.$baseMessage("组织树深度最大支持4层", "error");
  }
};
</script>

<style scoped>
.message-example {
  padding: 20px;
}

.example-section {
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.example-section h4 {
  margin-bottom: 15px;
  color: #1976d2;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
</style> 